import { COLORS, TIME_96 } from '@/pages/ETrade/components/helper';
import { getCssVariableValue } from '@/utils/utils';

export const tableHead = [
  { code: 'channelName', name: '类型', width: 120, lock: true },
  { code: 'voltage', name: '电压等级(kv)', width: 100, align: 'center', lock: true },
  ...TIME_96.map((timeKey, i) => ({
    code: `time_${i}`,
    name: timeKey,
    width: 120,
    align: 'center',
  })),
];

export const fmtData = (_data) => {
  if (!_data) {
    return {
      tableData: [],
      chartOption: null,
    };
  }
  let series = [];
  const tableData = _data.map((x) => {
    let row = {};
    x.powerList.map((y, i) => (row[`time_${i}`] = y));
    series.push({
      type: 'line',
      name: x.channelName,
      data: x.powerList,
      props: {
        smooth: true,
      },
    });
    return {
      ...x,
      ...row,
    };
  });
  return {
    tableData,
    chartOption: {
      series,
      color: COLORS,
      grid: { top: 24, left: 48, bottom: 48, right: 0 },
      tooltip: {
        enterable: true,
        extraCssText: 'max-height: 75%; overflow: hidden scroll;',
      },
      legend: {
        textStyle: {
          color: getCssVariableValue('--chart-legend-color'),
        },
        pageIconColor: getCssVariableValue('--bd-primary'),
        pageTextStyle: {
          color: getCssVariableValue('--chart-legend-color'),
        },
      },
      xAxis: [
        {
          type: 'category',
          data: TIME_96,
          axisLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisTick: {
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
          axisPointer: {
            type: 'line',
            lineStyle: {
              color: getCssVariableValue('--chart-x-line'),
            },
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          name: 'MW',
          nameTextStyle: {
            color: getCssVariableValue('--chart-font-color'),
          },
          splitLine: {
            lineStyle: {
              color: getCssVariableValue('--chart-y-line'),
            },
          },
          axisLabel: {
            color: getCssVariableValue('--chart-font-color'),
          },
        },
      ],
    },
  };
};
